import { useState } from "react";
import { useNavigate } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";

import RankTask from "./components/RankTask";
import WinningReward from "./components/WinningReward";

import "./index.scss";

const Reward = () => {
  const [IsAcitve, setIsAcitve] = useState(1);

  const navigate = useNavigate();

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  /**
   * 表单类别切换
   */

  const tabActive = (num: number) => {
    setIsAcitve(num);
  };

  return (
    <>
      <div className="reward-container">
        {/* 列表 */}
        <div className="room-list-box">
          <div className="top-box">
            <h1 className="title">
              <span className="issue">S1</span>
              <span className="name">赛季</span>
            </h1>
            <div className="time-slot">S1恐龙赛季2024.7.6-2024.803</div>
            <div className="grade-value">
              <img className="img-icon" src="/images/grade_1.png" />
              <div className="grade-box">
                <div className="level">
                  <span className="grade">青铜I</span>
                  <span className="exp">(230/300)</span>
                </div>
                <div className="progress">
                  <div className="progress-num" style={{ width: "50%" }}></div>
                </div>
              </div>
            </div>
          </div>
          <div className="tab-box">
            <div
              className={IsAcitve == 1 ? "item active" : "item"}
              onClick={() => {
                tabActive(1);
              }}
            >
              段位任务
            </div>
            <div
              className={IsAcitve == 2 ? "item active" : "item"}
              onClick={() => {
                tabActive(2);
              }}
            >
              连胜奖励
            </div>
          </div>
          {/* 列表 */}
          <div className="room-list">
            {IsAcitve == 1 ? <RankTask /> : <WinningReward />}
          </div>
        </div>

        {/* 返回 */}
        <div className="bottom-box">
          <div className="return-back-btn" onClick={handleGoBack}>
            <KeyboardBackspaceIcon />
            <span>返回</span>
          </div>
        </div>
      </div>
    </>
  );
};

export default Reward;
